<template>
  <div>
    <MBX level1="商品管理" level2="商品列表"></MBX>
    <el-card class="mt15">
      <!-- 搜索 -->
      <el-row :gutter='20'>
          <el-col :span='8'>
              <el-input placeholder="请输入内容">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
          </el-col>
          <el-col :span='16'>
              <el-button type="primary" @click='addGoods'>添加商品</el-button>
          </el-col>
      </el-row>
      <!-- 商品表格 -->
      <el-table border :data="tabledata" class="mt15">
          <el-table-column label='#' type='index'></el-table-column>
          <el-table-column  prop="goods_name" label='商品名称'></el-table-column>
          <el-table-column prop='goods_price' label='商品价格(元)'></el-table-column>
          <el-table-column prop='goods_weight' label='商品重量'></el-table-column>
          <el-table-column  label='创建时间'>

            <template slot-scope="scope">
              <div>
                {{ scope.row.add_time | dateTime }}
              </div>
            </template>

          </el-table-column>
          <el-table-column label='操作'>
            <template slot-scope="scope">
              <div>
                <el-button type='primary' icon='el-icon-edit' size='mini'></el-button>
                <el-button type='danger' icon='el-icon-delete' size='mini'></el-button>
              </div>
            </template>
          </el-table-column>
      </el-table>


       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
  import {goodslistapi} from '@/http/api'
export default {
  name: "goodslist",
  data() {
    return {
      queryInfo:{
        pagenum:1,
        pagesize:10,
        query:""
      },
      tabledata:[],
      total:0
    }
  },
  created() {
      this.getGoodsList()
  },
  methods:{
    addGoods() {
      this.$router.push('/addGoods')
    },
    handleSizeChange(v){
      this.queryInfo.pagesize=v
      this.getGoodsList()
    },
    handleCurrentChange(v){
      this.queryInfo.pagenum=v
      this.getGoodsList()
    },
    async getGoodsList() {
      const res=await goodslistapi(this.queryInfo)
      this.tabledata=res.goods
      this.total=res.total
    }
  }
};
</script>

<style lang="scss" scoped></style>
